import React from 'react';
import type { Node } from '@xyflow/react';
import { useTranslation } from 'react-i18next';
import './SettingsPanel.css';

interface SettingsPanelProps {
  selectedNode: Node | null;
  onDataChange: (nodeId: string, newData: object) => void;
  onNodeDelete: (nodeId: string) => void; // --- NEW ---
}

interface NodeSpecificFormProps {
  node: Node;
  onDataChange: (nodeId: string, newData: object) => void;
  onNodeDelete: (nodeId: string) => void; // --- NEW ---
}

const NodeSpecificForm = ({ node, onDataChange, onNodeDelete }: NodeSpecificFormProps) => {
  const { t } = useTranslation();
  
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value, type } = e.target;
    const finalValue = type === 'number' ? (value === '' ? '' : parseInt(value, 10)) : value;
    onDataChange(node.id, { [name]: finalValue });
  };

  const renderDefaultForm = () => (
    <>
      <label htmlFor="label">{t('settings.label')}</label>
      <input id="label" name="label" type="text" value={node.data.label || ''} onChange={handleInputChange} className="nodrag" />
    </>
  );

  const renderInputForm = () => (
    <>
      <label htmlFor="label">{t('settings.label')}</label>
      <input id="label" name="label" type="text" value={node.data.label || ''} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="file_path">{t('settings.filePath')}</label>
      <input id="file_path" name="file_path" type="text" placeholder={t('settings.filePathPlaceholder')} value={node.data.file_path || ''} onChange={handleInputChange} className="nodrag" />
    </>
  );

  const renderSelectColumnsForm = () => (
    <>
      <label htmlFor="label">{t('settings.label')}</label>
      <input id="label" name="label" type="text" value={node.data.label || ''} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="columns">{t('settings.columnsToSelect')}</label>
      <textarea id="columns" name="columns" placeholder={t('settings.columnsToSelectPlaceholder')} value={node.data.columns || ''} onChange={handleInputChange} className="nodrag" rows={4} />
    </>
  );

  const renderRandomForestForm = () => (
    <>
      <label htmlFor="label">{t('settings.label')}</label>
      <input id="label" name="label" type="text" value={node.data.label || ''} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="experiment_name">{t('settings.mlflowExperimentName')}</label>
      <input id="experiment_name" name="experiment_name" type="text" placeholder={t('settings.mlflowExperimentNamePlaceholder')} value={node.data.experiment_name || 'Default'} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="target_column">{t('settings.targetColumn')}</label>
      <input id="target_column" name="target_column" type="text" placeholder={t('settings.targetColumnPlaceholder')} value={node.data.target_column || ''} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="n_estimators">{t('settings.nEstimators')}</label>
      <input id="n_estimators" name="n_estimators" type="number" value={node.data.n_estimators || 100} onChange={handleInputChange} className="nodrag" />
      <label htmlFor="max_depth">{t('settings.maxDepth')}</label>
      <input id="max_depth" name="max_depth" type="number" value={node.data.max_depth || 10} onChange={handleInputChange} className="nodrag" />
    </>
  );

  const renderForm = () => {
    switch (node.type) {
      case 'read_csv':
        return renderInputForm();
      case 'select_columns':
        return renderSelectColumnsForm();
      case 'random_forest_train':
        return renderRandomForestForm();
      default:
        return renderDefaultForm();
    }
  };

  return (
    <div className="settings-content">
      {renderForm()}
      <hr />
      <p className="settings-info">{t('settings.nodeType')}: <strong>{node.type || 'default'}</strong></p>
      <p className="settings-info">{t('settings.nodeId')}: {node.id}</p>
      
      {/* --- NEW --- Delete Button */}
      <button onClick={() => onNodeDelete(node.id)} className="delete-node-button">
        {t('settings.deleteNodeButton')}
      </button>
    </div>
  );
};


const SettingsPanel = ({ selectedNode, onDataChange, onNodeDelete }: SettingsPanelProps) => {
  const { t } = useTranslation();
  return (
    <aside className="settings-panel">
      <div className="panel-title">{t('settings.panelTitle')}</div>
      {selectedNode ? (
        <NodeSpecificForm node={selectedNode} onDataChange={onDataChange} onNodeDelete={onNodeDelete} />
      ) : (
        <div className="panel-description">{t('settings.selectNodePrompt')}</div>
      )}
    </aside>
  );
};

export default SettingsPanel;